<template>
    <div class="doctorEvaluationList">
        <div class="container ">
            <!-- 头部信息 -->
            <Row>
                <Col :xs="24">
                    <div class="margin-up-down">
                        <fourLevelLinkage
                            @changeProvince="changeProvince"
                            @changeCity="changeCity"
                            @changeArea="changeArea"
                            @changeHospital="changeHospital"
                            :province="province"
                            :city="city"
                            :area="area"
                            :hospital="hospital"
                        ></fourLevelLinkage>
                    </div>
                    <div class="margin-up-down">
                        <Select class="w-select" clearable v-model="dictType" style="width:120px;" placeholder="科室">
                            <Option
                                v-for="item in deptmentList"
                                :value="item.dictType"
                                :key="item.dictType"
                                style='text-align:center'
                            >{{item.dictName}}</Option>
                        </Select>
                    </div>
                    <div class="margin-up-down">
                        <DatePicker type="daterange" v-model="time" placement="bottom-end" placeholder="请选择日期" separator='至' format="yyyy-MM-dd" style="width: 200px"></DatePicker>
                    </div>
                    <div class="margin-up-down">
                        <Select class="w-select" clearable v-model="inqConType" style="width:120px;" placeholder="业务类型">
                            <Option
                                v-for="item in businesstypelist"
                                :value="item.dictValue"
                                :key="item.dictValue"
                                style='text-align:center'
                            >{{item.dictName}}</Option>
                        </Select>
                    </div>
                    <div class="margin-up-down">
                        <Select class="w-select" clearable v-model="pjstatus" style="width:120px;" placeholder="评价状态">
                            <Option
                                v-for="item in evaluationStatuslist"
                                :value="item.dictValue"
                                :key="item.dictValue"
                                style='text-align:center'
                            >{{item.dictName}}</Option>
                        </Select>
                    </div>
                    <div class="margin-up-down">
                        <Select class="w-select" clearable v-model="starLevel" style="width:120px;" placeholder="评价星级">
                            <Option
                                v-for="(item,index) in evaluationStarlist"
                                :value="index"
                                :key="index"
                                style='text-align:center'
                            >{{item}}</Option>
                        </Select>
                    </div>
                    <div class="margin-up-down">
                        <Input
                        v-model.trim="Name"
                        placeholder="请输入医生姓名"
                        style="width: 150px"
                        clearable
                        />
                    </div>
                    <div class="margin-up-down">
                        <Button type="primary" icon="ios-search" @click="getDoctorData(1)" style="width:51px;height:32px;"></Button>
                        <Button @click="handleReset()" style="width:51px;height:32px;">
                            <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
                        </Button>
                    </div>
                </Col>
            </Row>
            <!-- 列表 -->
            <div class="list">
                <Table @on-selection-change="selectChange" :loading="tableLoading" border stripe :columns="column1" :data="datalist"></Table>
            </div>
            <!--分页器-->
            <div class="paging">
                <Page :total="residentregisterSize" :current='pageNo' :page-size="pageSize"  show-total show-elevator @on-change="pageChange"/>
            </div>
        </div>
    </div>
</template>
<script>
import { Page, DatePicker } from "view-design";
import fourLevelLinkage from "@/components/fourLevelLinkage";
import api from "@/api/commonApi";
import Utils from "@/utils";
export default {
    components: {
        fourLevelLinkage,
        Page,
        DatePicker,
    },
    data(){
        return{
            time: [],
            province: null,
            city: null,
            area: null,
            hospital: null,
            startDate: "",
            endDate: "",
            dictType: "",
            deptmentList:[],
            departmentslist:[
                "全部",
                "普通内科",
                "呼吸内科",
                "外科",
            ],
            inqConType: null, //业务类型
            businesstypelist:[
                {dictName: '健康问询', dictValue: 0},            
                {dictName: '在线问诊', dictValue: 1},            
                {dictName: '复诊续方', dictValue: 2},            
                // {dictName: '外延处方', dictValue: 3},            
                {dictName: '用药咨询', dictValue: 4},            
                {dictName: '全部', dictValue: ' '},            
            ],
            pjstatus: null, //评价状态
            evaluationStatuslist: [             
                {dictName: '未评价', dictValue: 0},
                {dictName: '已评价', dictValue: 1},
                {dictName: '全部', dictValue: ' '},
            ],
            starLevel: null,
            evaluationStarlist: [
                "全部",
                "一星",
                "二星",
                "三星",
                "四星",
                "五星",
            ],
            star: [
                {url: require("../../../../static/img/star_1.png") },
                {url: require("../../../../static/img/star_2.png") },
                {url: require("../../../../static/img/star_3.png") },
                {url: require("../../../../static/img/star_4.png") },
                {url: require("../../../../static/img/star_5.png") },
            ],
            Name: "",
            tableLoading: false,
            datalist: [],
            column1: [
                {title: "排序",key: "sum",align: "center",width:80,
                   render: (h, params) => {
                        let sum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", sum);
                    } 
                },
                {title: "业务流水号",key: "orderNumber",align: "center",width:200,},
                {title: "姓名",key: "memberName",align: "center",width:100,},             
                {title: "业务类型",key: "inqConType",align: "center",width:100,
                render: (h, params) => {
                    let inqType = params.row.inqType;
                    switch (inqType) {
                        case 0:
                            return "健康咨询";
                        case 1:
                            return "在线问诊";
                        case 2:
                            return "复诊续方";
                        case 3:
                            return "外延处方";
                        case 4:
                            return "用药咨询";
                        case ' ':
                            return "全部";
                    }        
                    return h("span", this.businesstypelist[inqType]);
                    }
                },
                {title: "医生",key: "doctorName",align: "center",width:100,},
                {title: "评价时间",key: "createTime",align: "center",width:100,},
                {title: "评价星级",key: "starLevel",align: "center",width:150,
                 render: (h,params) => {
                    let starLevel = params.row.starLevel;
                    return h("span", this.evaluationStarlist[starLevel]);
                 }
                },
                {title: "评价标签",key: "lable",align: "center"},
                {title: "评价内容",key: "evaluate",align: "center"},
                {
                    title: "设置",
                    key: "operate",
                    align: "center",
                    width: 80,
                    render: (h, params) => {
                        let id = params.row.inqId;
                        let servertype = params.row.inqType;
                        let startDate = new Date(this.time[0]);
                        let endDate = new Date(this.time[1]);
                        startDate = startDate.toLocaleDateString().replace(/\//g, "-");
                        endDate = endDate.toLocaleDateString().replace(/\//g, "-");
                        return h(
                            "a",
                            {
                            attrs: {
                                href: "javascript:void(0);"
                            },
                            on: {
                                click: () => {
                                    //   公用方法
                                    this.functionJS.queryNavgationTo(
                                        this,"/index/orders/consultingorder/detail",
                                        {
                                            id,
                                            pageNo: this.pageNo,
                                            searchKey: this.Name,
                                            startDate: startDate,
                                            endDate: endDate,
                                            status: this.inqConType,
                                            province: this.province,
                                            city: this.city,
                                            area: this.area,
                                            hospital: this.hospital,
                                            isBack: 2,
                                            serviceId: id,
                                            servertype,
                                        }
                                    );
                                }
                            }
                            },
                            "详情"
                        );
                    }
                },
            ],
            list: [],
            count: 0,
            residentregisterSize: 0,
            pageSize: 10,
            pageNo: 1
        }
    },
    created(){
        if(this.$store.state.resourceUrl == 'gphealth'){
            this.businesstypelist = this.businesstypelist.filter(item => item.dictName !== '在线问诊' && item.dictName !== '复诊续方');
        }
        let pageNo = this.$route.query.pageNo
            ? parseInt(this.$route.query.pageNo)
            : 1;
        this.publicationStatus =
            this.$route.query.publicationStatus == null
                ? null
                : parseInt(this.$route.query.publicationStatus);
        this.articleText = this.$route.query.articleText
            ? this.$route.query.articleText
            : "";
        // this.startDate = this.GetDate(-2);
        // this.endDate = this.GetDate(0);
    },
    mounted() {
        let pageNo = this.$route.query.pageNo;
        if (pageNo) {
            this.pageNo = pageNo;
        }
        this.getDoctorData(this.pageNo);
        this.loadingDepartment();
    },
    methods:{
        changeProvince(val) {
            this.province = val;
        },
        changeCity(val) {
            this.city = val;
        },
        changeArea(val) {
            this.area = val;
        },
        changeHospital(val) {
            this.hospital = val;
            this.dictType = null;
            this.loadingDepartment();
        },
        // 页面查询的科室选择框
        loadingDepartment(){
            let url = api.querydeptname
            let params = {
                hospitalId : this.hospital
            }
            this.packageAxios(this,url,params,(res)=>{
                console.log(res);
                if(res.data.success) {
                    let ret = res.data.object;
                    
                    this.deptmentList = ret;
                } else {
                    this.$Message.error("加载失败")
                }
            })
        },
        //选择日期
        changeStart(val) {
            this.startDate = val;
        },
        changeEnd(val) {
            this.endDate = val;
        },
        //表格
        selectChange(selections) {
            this.selections = selections;
        },
        // 分页
        pageChange(index) {
            if (this.Name) {
                this.getDoctorData(index, this.Name);
            } else {
                this.getDoctorData(index);
            }
        },
        //重置
        handleReset() {
            this.pageNo = 1;
            this.pageSize = 10;       
            this.province = null;
            this.city = null;
            this.area = null;
            this.Name = "";
            this.hospital = null;
            this.dictType = null;
            this.startDate = null;
            this.endDate = null;
            this.inqConType = ' ';
            this.pjstatus = ' ';
            this.time = []
            this.starLevel = null;
            this.getDoctorData(this.pageNo);
        },
        // 查询，获取页面数据
        getDoctorData(pageNo) {
            if  (pageNo) {
                this.pageNo = Number(pageNo);
            }
            let params = {
                pageNo: this.pageNo,
                pageSize: this.pageSize
            };
            if (this.Name != "") {
                params.searchKey = this.Name.trim();
            }
            params.provinceCode = this.province ? this.province : null;
            params.cityCode = this.city ? this.city : null;
            params.areaCode = this.area ? this.area : null;
            params.hospitalId = this.hospital ? this.hospital : null;
            params.deptType = this.dictType ? this.dictType : null;
            params.inqType = this.inqConType;
            params.pjstatus = this.pjstatus;
            params.starLevel = this.starLevel ? this.starLevel : null;
            let startDate = new Date(this.time[0]);
            let endDate = new Date(this.time[1]);
            startDate = Utils.getNowDateBySpecialFormat(this.time[0]);
            endDate = Utils.getNowDateBySpecialFormat(this.time[1]);
            params.fromTime = startDate ? startDate : null;
            params.endTime = endDate ? endDate : null;
            this.tableLoading = true;
            this.$axios.post(api.findDoctorEvaluationPage, params).then(res => {
            if (res.data.code) {               
                let ret = res.data.object;
                this.residentregisterSize = ret.total;
                if (ret.records) {                   
                    ret.records.forEach((item,index) =>{
                        item.sum = this.addZeros(index)
                    })
                    let dataList = ret.records
                    for (let key in dataList) {
                        dataList[key].iNum = parseInt(key) + 1;
                    }
                    this.datalist = dataList;
                } else {
                    this.residentregisterSize = 0;
                    this.datalist = [];
                }
            } else {
                this.$Message.info(res.data.message);
            }
            this.tableLoading = false;
            }).catch(() => {
            this.tableLoading = false;
            });
        },
        // 下载导出信息
        fileDownload () {
            let url = api.cordwriteexcel
            var params = {};
            params.provinceCode = this.province ? this.province : null;
            params.cityCode = this.city ? this.city : null;
            params.areaCode = this.area ? this.area : null;
            params.hospitalId = this.hospital ? this.hospital : null;
            params.deptType = this.dictType ? this.dictType : null;
            params.inqConType = this.inqConType ? this.inqConType : null;
            params.pjstatus = this.pjstatus ? this.pjstatus : null;
            params.starLevel = this.starLevel ? this.starLevel : null;
            //查询的时间区间
            let startDate = new Date(this.time[0]);
            let endDate = new Date(this.time[1]);
            startDate = startDate.toLocaleDateString().replace(/\//g, "-");
            endDate = endDate.toLocaleDateString().replace(/\//g, "-");
                params.fromTime = startDate;
                params.endTime = endDate;
            // 模糊查询
            params.searchKey = this.Name.trim() ? this.Name.trim() : null;
            params.pageNo = 1;
            params.pageSize = this.count;
            const link = document.createElement('a')
            console.log(params);
            console.log(link);
            this.$axios.post(url, params, { responseType: "arraybuffer" }).then(res =>{
                if (res.data) {
                    let ret = res.data;
                    // var blob = new Blob([ret],{ type:"application/vnd.ms-excel" });
                    // let objUrl = URL.createObjectURL(blob);
                    // window.location.href = objUrl;
                    let blob = new Blob([ret], {type: "application/vnd.ms-excel"})
                    let objectUrl = URL.createObjectURL(blob) // 创建URL
                    link.href = objectUrl
                    link.download = '医生评价表' // 自定义文件名
                    link.click() // 下载文件
                    URL.revokeObjectURL(objectUrl); // 释放内存
                }
            })
        },
    },
    watch: {
        'pageSize'(nv, ov) {
            this.getDoctorData(this.pageNo)
        },
    }
}
</script>
<style lang="less" scoped>
.doctorEvaluationList{
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .container{
        .margin-up-down {
            display: inline-block;
            margin: 10px 0 10px 10px;
        }
        .list {
            width: 100%;
            margin: 10px 0;
            overflow: scroll;
            overflow-x: auto;
        }
        .paging {
            width: 100%;
            margin: 10px auto;
            text-align: center;
        }
    }  
}
</style>